import React,{Component} from 'react';
import {connect} from 'react-redux';
import {fetchList,fetchProduct} from '../actions/counter';
class Home extends Component{
	componentWillMount(){
		this.props.fetchList();
		this.props.fetchProduct();
		
	}
	render() {
		const {lists,products,fetchList,fetchProduct} =this.props;
		// console.log(this.props.products);
		
		var news = [];
		if(lists.rows&&lists.rows.length>0){
			
			for(let i=0;i<3;i++){
				var lujin = 'http://localhost:3000/' + lists.rows[i].pic.filename;
				
				news.push(
					<div className="col-lg-4" key={i} style={{textAlign:"center"}}>
						<img className="img-circle" src={lujin}  width="140" height="140"/>
						<h2>{lists.rows[i].title}</h2>
						<p >{lists.rows[i].content}</p>
						<p><a className="btn btn-default" href="#" role="button">新闻详情</a></p>
					</div>
				)
			}
		}
		
		var product = [];
		if(products.rows&&products.rows.length>0){
			
			for(let i=0;i<3;i++){
				var productsImg = [];
				for(let j=0;j<products.rows[i].pic.length;j++){
					var productsPath = 'http://localhost:3000/' + products.rows[i].pic[j].filename;
					productsImg.push(<img className="featurette-image img-responsive center-block" src= {productsPath} />);
					
				}
				product.push(
					<div key={i}>
						<div className="row featurette">
							<div className="col-md-7">
								<h2 className="featurette-heading">{products.rows[i].name}<span className="text-muted"></span></h2>
								<p className="lead">{products.rows[i].description}</p>
							</div>
							<div className="col-md-5">
								{productsImg[0]}
							</div>
						</div>
						
						<hr className="featurette-divider"/>
					</div>
				)
			}
		}
	
		
		
		return(
			
			<div>
				<div id="carousel-example-generic" className="carousel slide" data-ride="carousel">
					
					<ol className="carousel-indicators">
						<li data-target="#carousel-example-generic" data-slide-to="0" className="active"></li>
						<li data-target="#carousel-example-generic" data-slide-to="1"></li>
						<li data-target="#carousel-example-generic" data-slide-to="2"></li>
					</ol>
					
					
					<div className="carousel-inner" role="listbox">
						<div className="item active">
							<img src="1.jpg" alt=""/>
							<div className="carousel-caption">
							
							</div>
						</div>
						<div className="item">
							<img src="1.jpg" alt=""/>
							<div className="carousel-caption">
							
							</div>
						</div>
						<div className="item">
							<img src="1.jpg" alt=""/>
							<div className="carousel-caption">
							
							</div>
						</div>
					
					</div>
					
					<a className="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
						<span className="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
						<span className="sr-only">Previous</span>
					</a>
					<a className="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
						<span className="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
						<span className="sr-only">Next</span>
					</a>
				</div>
				
				
				
				
				
				<div className="container marketing">
					<hr className="featurette-divider"/>
					<div className='container'><h2>最新新闻</h2></div>
						<div className="row">
							{news}
						</div>
					
					
				
					<hr className="featurette-divider"/>
						<div className='container'><h2>推荐产品</h2></div>
					
							{product}
				</div>
				
			</div>
	
		)
	}
}

const getValue = (state) => {
	return{
		lists:state.lists,
		products:state.products
	}
}

const HomeVal = connect(getValue,{fetchList,fetchProduct})(Home)

module.exports = HomeVal;


